---
import Link from "@components/Links.astro";
import { SITE_TITLE, HeaderLinks, DARK_THEME, LIGHT_THEME } from "@consts";
---

<header class="z-50 flex w-full flex-wrap py-7 md:flex-nowrap md:justify-start">
  <nav
    class="relative mx-auto flex w-full max-w-7xl basis-full flex-wrap items-center px-4"
    aria-label="Global"
  >
    <div class="">
      <a
        class="flex-none text-xl font-semibold"
        href="/"
        aria-label="Astromelody"
      >
        {SITE_TITLE}
      </a>
    </div>

    <div class="ms-auto flex items-center gap-x-2 py-1">
      <a
        class="inline-flex items-center gap-x-2 rounded-xl border border-transparent px-3 py-2 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
        href="/search/"
        href="/search/"
      >
        <i class="icon-base icon-[tabler--search]"></i>
      </a>

      <div class="dropdown dropdown-end">
        <div
          tabindex="0"
          role="button"
          class="flex size-[38px] items-center justify-center rounded-xl text-sm font-semibold"
        >
          <i class="icon-base icon-[tabler--category-2]"></i>
        </div>
        <ul
          tabindex="0"
          class="menu dropdown-content rounded-box bg-base-100 z-[1] w-52 p-2 shadow"
        >
          {
            HeaderLinks.map((link) => (
              <li>
                <Link href={link.href} class="px-4 py-3 font-medium">
                  {link.title}
                </Link>
              </li>
            ))
          }
        </ul>
      </div>

      <label class="swap swap-rotate rounded-xl px-3 py-2 text-sm">
        <!-- this hidden checkbox controls the state -->
        <input
          type="checkbox"
          class="theme-controller"
          data-unchecked-value={LIGHT_THEME}
          value={DARK_THEME}
        />
        <!-- sun icon -->
        <i class="icon-base swap-off icon-[tabler--sun-filled]"></i>
        <!-- moon icon -->
        <i class="icon-base swap-on icon-[tabler--moon-filled]"></i>
      </label>
    </div>
  </nav>
</header>

<!-- Save theme to localStorage -->
<script is:inline>
  const themeController = document.querySelector(".theme-controller");
  const lightTheme = document
    .querySelector(".theme-controller")
    .getAttribute("data-unchecked-value");
  // ☝️ This script prevent the FART effect.
  if (localStorage.getItem("theme") === null) {
    document.documentElement.setAttribute("data-theme", lightTheme);
  } else {
    const dt = localStorage.getItem("theme");

    if (lightTheme !== dt) {
      themeController.checked = true;
    }
  }

  themeController.addEventListener("change", () => {
    const t = themeController.checked
      ? themeController.value
      : themeController.getAttribute("data-unchecked-value");
    localStorage.setItem("theme", t);
  });
  // "theme" LocalStorage value is set by the package to remember user preference.
  // The value is checked and applyed before rendering anything.
</script>
